<template>
  <div class="page">
    <!-- 顶部栏 -->
    <van-nav-bar fixed placeholder :border="false">
      <template #title>
        <div class="fz-16 fw-bold">兑换记录</div>
      </template>
    </van-nav-bar>

    <div class="container">
      <!-- 状态 -->
      <ul class="tab flex mb-10">
        <li
          :class="i === tabIndex ? 'active' : ''"
          v-for="(v, i) in tabs"
          :key="i"
          @click=";(tabIndex = i), getProductOrderList()"
        >
          <van-button type="primary">{{ v }}</van-button>
        </li>
      </ul>

      <!-- 订单列表 -->
      <ul v-if="orders.length">
        <li class="box cl-white mb-10" v-for="(v, i) in orders" :key="i">
          <div class="flex flex-cc mb-10">
            <img
              class="opacity radius mr-10"
              style="width: 133px; height: 121px"
              :src="v.img"
            />

            <div>
              <div>{{ v.goodsName }}</div>
              <div class="cl-success">价值：{{ v.price }}U</div>
              <div class="fz-12">手工费：{{ v.fees }}</div>
              <div class="fz-12">数量：{{ v.num }}</div>
              <div class="fz-12">状态：{{ status[v.status] }}</div>
            </div>
          </div>

          <div class="flex flex-cc flex-rb">
            <div class="fz-12" v-if="v.status === 2">
              发货时间：{{ v.deliverGoodsDate }}
            </div>
            <div class="fz-12" v-else>兑换时间：{{ v.createTime }}</div>

            <div v-if="[2, 3].includes(v.status)">
              <van-button
                type="primary"
                @click=";(currentRow = v), (expressVisible = true)"
              >
                查看单号
              </van-button>
            </div>
          </div>
        </li>
      </ul>

      <!-- 暂无数据 -->
      <van-empty v-else>
        <span class="cl-white">暂无数据</span>
      </van-empty>
    </div>

    <!-- 物流信息 -->
    <van-popup
      round
      closeable
      :close-on-click-overlay="false"
      v-model:show="expressVisible"
    >
      <div class="p-15 pt-50 cl-black" style="width: 300px">
        <div>
          <div class="fz-16 fw-bold mb-10">物流单号</div>

          <div class="input radius mb-30">
            <van-field
              readonly
              v-model="currentRow.deliverGoodsNumber"
            ></van-field>
          </div>
        </div>

        <div class="flex flex-center mt-30">
          <van-button
            type="primary"
            @click="copyString(currentRow.deliverGoodsNumber)"
          >
            复制
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import goldApi from 'js/gold.api'
import { copyString } from 'js/utils'

const tabs = ref(['全部', '待发货', '已发货'])
const tabIndex = ref(0)

const orders = ref([])

const status = ref({
  0: '未支付',
  1: '待发货',
  2: '已发货',
  3: '已完成',
})

const currentRow = ref(null)
const expressVisible = ref(false)

getProductOrderList()

// 获取商品订单列表
async function getProductOrderList() {
  const params = {
    status: 1,
    afterSalesStatus: tabIndex.value === 0 ? '' : tabIndex.value,
    current: 1,
    size: 100000,
  }

  const { code, data } = await goldApi.getProductOrderList(params)

  if (code === 200) {
    orders.value = data.records || []
  }
}
</script>

<style lang="scss" scoped>
.tab {
  li {
    width: calc(100% / 3);
    opacity: 0.5;

    :deep(.van-button) {
      width: 100%;
      min-width: unset !important;
    }

    &:nth-child(2n) {
      margin: 0 10px;
    }

    &.active {
      opacity: 1;
    }
  }
}

.input {
  background-color: rgb(48, 57, 98, 0.75);

  :deep(.van-field) {
    background-color: transparent;

    input {
      color: var(--color-white);
    }
  }
}
</style>
